<template>
    <div class="life">
        <el-header>
            <p>生活</p>
        </el-header>
        <div class="life-content">
            <el-tabs v-model="activeName" class="tabs">
                <el-tab-pane label="音乐" name="music">
                    <life-music></life-music>
                </el-tab-pane>
                <el-tab-pane label="电台" name="radio" class="radio">
                    <life-radio></life-radio>
                </el-tab-pane>
                <el-tab-pane label="天气" name="weather">
                    <life-weather></life-weather>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import lifeMusic from './components/Music'
import lifeRadio from './components/Radio'
import lifeWeather from './components/Weather'
export default {
    name: 'Life',
    data() {
        return {
            activeName: 'music',
            
        }
    },
    methods: {
        
    },
    components: {
        lifeMusic,
        lifeRadio,
        lifeWeather
    }
}
</script>

<style lang="scss" scoped>
.life{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: #ffffff;
    .el-header{
        height: 50px !important;
        line-height: 50px;
        p{
            font-weight: bold;
        }
    }
    .life-content{
        padding: 20px;
        box-sizing: border-box;
        #tab-radio{
            margin: 0 20px;
        }
    }
}
</style>

